<template>
	<view>
		<map :longitude="longitude" :latitude="latitude" :scale="scale" :min-scale="minScale" :max-scale="maxScale"
			:markers="markers" :polyline="polyline" :circles="circles" :controls="controls" :show-compass="showCompass"
			:enable-zoom="enableZoom" :enable-scroll="enableScroll" :enable-rotate="enableRotate"
			:enable-overlooking="enableOverlooking" :enable-satellite="enableSatellite" :enable-traffic="enableTraffic"
			:show-location="showLocation" style="width: 750rpx; height: 100vh" />
		<!-- <view class="btn">
      <view class="button" @click="handleNav">导航</view>
    </view> -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				longitude: 0, // 经度
				latitude: 0, // 维度
				scale: 16, // 缩放级别 取值范围为3-20
				minScale: 3, // 最小缩放级别
				maxScale: 20, // 最大缩放级别
				markers: [], // 标记点
				polyline: [], // 路线
				circles: [], // 圆
				controls: [], // 控件
				showCompass: false, // 是否显示指南针
				enableZoom: true, // 是否支持缩放
				enableScroll: true, // 是否支持拖动
				enableRotate: false, // 是否支持旋转
				enableOverlooking: false, // 是否开启俯视
				enableSatellite: false, // 是否开启卫星图
				enableTraffic: false, // 是否开启实时路况
				showLocation: false, // 显示带有方向的当前定位点
			};
		},
		onLoad(e) {
			this.longitude = parseFloat(e.lng);
			this.latitude = parseFloat(e.lat);
			this.initMap(e);
		},
		methods: {
			// 初始化标记点
			initMap(e) {
				let result = this.$store.dispatch("permission/requestPermissions",
					'ACCESS_FINE_LOCATION')
				if (result !== 1) return

				// 获取自己当前位置
				uni.getLocation({
					type: "gcj02",
					success: (res) => {
						const lat = res.latitude;
						const lng = res.longitude;
						console.log(lat, lng);
					},
					fail: (res) => {
						console.log(res, "获取失败");
					},
				});
				let mark = {
					id: this.markers.length + 1,
					latitude: parseFloat(e.lat),
					longitude: parseFloat(e.lng),
					iconPath: require("../../static/my/marker.png"),
					width: 20,
					height: 24,
				};
				this.markers.push(mark);
			},
			// 导航
			handleNav() {
				uni.openLocation({
					latitude: this.latitude,
					longitude: this.longitude,
					address: this.address,
					scale: 16,
					success: () => {
						console.log("success");
					},
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.btn {
		position: fixed;
		background-color: #fff;
		box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.05);
		height: 126rpx;
		padding: 20rpx;
		bottom: 0;
		left: 0;
		right: 0;

		.button {
			width: 100%;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			color: $active-color;
			font-size: 28rpx;
			background-color: #cee7e5;
			border-radius: 100rpx;

			&:active {
				background-color: #b9e4e1;
			}
		}
	}
</style>